<template>
	<view class="tab-bar">
		<u-tabbar  
			:value="tab_bar_active"
			@change="change_tab_bar"
			zIndex="1000"
			placeholder
			fixed
			activeColor="#fda085"
			:border="false"
			:safeAreaInsetBottom="false"
		>
			<u-tabbar-item text="首页" icon="home" name="home" ></u-tabbar-item>
			<u-tabbar-item text="全部商品" icon="bag" name="goods"></u-tabbar-item>
			<!-- <u-tabbar-item text="消息" icon="chat" dot name="message"></u-tabbar-item> -->
			<u-tabbar-item text="订单" icon="shopping-cart" name="orders" badge="3"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" name="personal"></u-tabbar-item>
		</u-tabbar>
		
	</view>
</template>

<script setup>
	import { ref } from "vue"
	import { useRouter } from "vue-router"
	const router = useRouter();
	const tab_bar_active = ref(wx.getStorageSync("tab_bar_index") || "home");

	const change_tab_bar = (name) => {
		wx.setStorageSync('tab_bar_index', name)
		let router_url = ""
		let router_animation_type = ""
		let router_animation_duration = 200

		switch(name){
			case "home":
				router_url = "/pages/home/index";
				router_animation_type = "fade-in";
				break;
			case "goods":
				router_url = "/pages/goods/index";
				router_animation_type = "fade-in";
				break;
			// case "message":
			// 	router_url = "/pages/message/index";
			// 	router_animation_type = "fade-in";
			// 	break;
			case "orders":
				router_url = "/pages/orders/index";
				router_animation_type = "fade-in";
				break;
			case "personal":
				router_url = "/pages/personal/index";
				router_animation_type = "fade-in";
				break;
		}
		
		uni.redirectTo({
			url: router_url,
			animationType: router_animation_type,
			animationDuration: router_animation_duration
		});
	}
	

</script>

<style>


</style>